<template>
  <div class="content-container">
    <a-row class="btn-line">
      <a-input style="width:200px;" placeholder="Basic usage" />
      <a-button class="btn" type="primary" @click="deviceVisible = true">
        新增
      </a-button>
      <a-button
        class="btn"
        :type="multiple ? '' : 'primary'"
        @click="changeMultiple"
      >
        {{ multiple ? '取消' : '多选' }}
      </a-button>
      <a-button
        class="btn"
        type="primary"
        v-if="multiple"
        @click="openUpdate(false)"
      >
        批量升级
      </a-button>
      <a-button
        class="btn"
        type="primary"
        v-if="multiple"
        @click="deleteLinks()"
      >
        批量删除
      </a-button>
      <span v-show="false">
        {{ selectArr }}
      </span>
    </a-row>
    <!-- 新增设备 -->
    <addItem v-if="deviceVisible" @closeAdd="closeAdd"></addItem>
    <!-- 升级组件 -->
    <updateItem
      v-if="updateVisible"
      @closeUpdate="closeUpdate"
      :starlinkIds="starlinkIds"
    ></updateItem>
    <a-spin tip="Loading..." v-if="loading"> </a-spin>
    <!-- 筛选条件 -->
    <a-row :gutter="[10, 10]" type="flex" justify="start">
      <a-col
        class="star-container"
        :class="item.select ? 'actived' : ''"
        @click="selectItem(item, index, $event)"
        :xs="24"
        :sm="12"
        :md="12"
        :lg="6"
        :xl="6"
        :xxl="6"
        v-for="(item, index) in allStarList"
        :key="index"
      >
        <div class="star-item" v-if="item.status === 1">
          <div class="star-top">
            <p style="font-weight:bold;font-size:14px">
              设备ID/名称：
              <router-link
                :to="{ path: 'starDetail', query: { plan: item.starlinkId } }"
                >{{ item.starlinkId }}</router-link
              >
            </p>
            <p>
              延时：<span style="color:#44D7B6;">{{ item.delay }}</span>
            </p>
            <p>设备温度：{{ item.device_temp }}</p>
            <p>
              CPU占有率：
              <span class="cpu">
                <a-progress
                  :stroke-color="{
                    from: '#108ee9',
                    to: '#87d068',
                  }"
                  status="active"
                  :percent="parseInt(item.cpu_utility)"
                />
              </span>
            </p>
          </div>

          <div class="star-bottom">
            <img
              class="icon-img-2"
              @click="deleteOne(item.starlinkId)"
              src="../../assets/img/delete.png"
              alt=""
            />
            <img
              @click="openUpdate(item.starlinkId)"
              class="icon-img-1"
              src="../../assets/img/update.png"
              alt=""
            />
          </div>
        </div>
        <div class="star-item error-item" v-if="item.status === 0">
          <span class="star-status"><span>已掉线</span> </span>
          <div class="star-top">
            <p>
              设备ID/名称：
              <router-link
                :to="{ path: 'starDetail', query: { plan: item.starlinkId } }"
                >{{ item.starlinkId }}</router-link
              >
            </p>
            <p>故障原因：{{ item.error }}</p>
            <p>
              上次在线时间：<span>{{ item.last_online | transtionTime }}</span>
            </p>
          </div>

          <div class="star-bottom">
            <img
              class="icon-img-2"
              @click="deleteOne(item.starlinkId)"
              src="../../assets/img/delete.png"
              alt=""
            />
            <img
              @click="openUpdate(item.starlinkId)"
              class="icon-img-1"
              src="../../assets/img/update.png"
              alt=""
            />
          </div>
        </div>
      </a-col>
    </a-row>
    <div class="pagenation-line">
      <!-- 分页 -->
      <a-pagination
        v-model="page"
        :pageSize="pagesize"
        @change="changePage"
        :total="total"
        show-less-items
      />
    </div>
  </div>
</template>

<script>
import { getAllStar, postDeleteStarlink } from '../../services/user';
import updateItem from '../../components/update/update.vue';
import addItem from '../../components/addStarlink/addStarlink.vue';

export default {
  name: 'Demo',
  i18n: require('./i18n'),
  components: {
    updateItem,
    addItem,
  },
  filters: {
    transtionTime(value) {
      if (!value) return '';
      var dayjs = require('dayjs');
      return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
    },
  },
  data() {
    return {
      loading: false,
      starlinkIds: [],
      selectArr: [],
      allStarList: [],
      page: 1,
      pagesize: 20,
      total: 50,
      multiple: false,
      canPush: true,
      deviceVisible: false,
      updateVisible: false,
      timer: '',
    };
  },
  methods: {
    changePage(page) {
      this.page = page;
      this.getInfo();
    },
    changeMultiple() {
      // 修改是否多选
      this.multiple = !this.multiple;
      if (!this.multiple) {
        this.getInfo();
      }
    },
    openUpdate(id) {
      // 多选 单选
      if (id) {
        this.starlinkIds = [id];
      } else {
        if (this.selectArr.length === 0) {
          this.$message.error('请选择选中要升级的设备');
          return;
        }
        this.starlinkIds = this.selectArr;
        console.log(this.selectArr);
      }
      this.updateVisible = true;
    },
    closeAdd() {
      this.deviceVisible = false;
      // 刷新列表
      this.getInfo();
    },
    closeUpdate() {
      this.updateVisible = false;
      this.getInfo();
    },
    // 单个删除
    deleteOne(uid) {
      let _this = this;
      this.$confirm({
        title: '提示',
        content: '是否确认当前操作',
        onOk() {
          console.log('OK');
          postDeleteStarlink(
            [uid],
            _this.$store.state.account.userObj.name
          ).then((res) => {
            console.log('我要删除的ID', res);
            // 删除成功 提示一下 然后刷新页面
            _this.getInfo();
            _this.$message.success('操作成功');
          });
        },
        onCancel() {
          console.log('Cancel');
          _this.$message.info('取消操作');
        },
      });
    },
    // 批量删除
    deleteLinks() {
      let _this = this;
      this.$confirm({
        title: '提示',
        content: '是否确认当前操作',
        onOk() {
          console.log('OK');
          postDeleteStarlink(
            _this.selectArr,
            _this.$store.state.account.userObj.name
          ).then((res) => {
            console.log(res);
            // 删除成功 提示一下 然后刷新页面
            _this.getInfo();
            _this.$message.success('操作成功');
          });
        },
        onCancel() {
          console.log('Cancel');
          _this.$message.info('取消操作');
        },
      });
    },
    selectItem(obj, index, e) {
      console.log(e.target.tagName);
      if (e.target.tagName === 'IMG' || !this.multiple) return;
      this.canPush = true;
      // 判断是否已经选中
      this.selectArr.forEach((item, index) => {
        if (item === obj.starlinkId) {
          this.selectArr.splice(index, 1);
          this.canPush = false;
          obj.select = false;
        }
      });
      if (this.canPush) {
        this.selectArr.push(obj.starlinkId);
        obj.select = true;
        this.allStarList[index].select = true;
      }
    },
    getInfo() {
      this.loading = true;
      getAllStar({
        page: this.page,
        pagesize: this.pagesize,
      }).then((res) => {
        this.allStarList = res.data.result;
        this.total = res.data.total_num;
        this.allStarList.forEach((item) => {
          item.select = false;
        });
        this.selectArr = [];
        this.loading = false;
      });
      // 定时任务 10s 请求一次
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.getInfo();
      }, 10000);
    },
  },
  destroyed() {
    // 注销定时任务
    clearInterval(this.timer);
  },
  mounted() {
    this.getInfo();
  },
};
</script>

<style scoped lang="less">
.pagenation-line {
  padding-top: 16px;
}
.star-container.actived .star-item {
  border: 1px solid #3d7fff;
}
.device-name {
  color: #3d7fff;
  cursor: pointer;
}
.star-container {
  // border: 1px solid #ddd;
  font-size: 12px;
}
.star-item {
  border: 1px solid #ddd;
  cursor: pointer;
  transition: all 0.3s;
}
.star-item:hover {
  border-color: rgba(0, 0, 0, 0.09);
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}
.star-bottom {
  border-top: 1px solid #ddd;
}
.error-item {
  background: #f4f4f4;
  position: relative;
  font-size: 12px;
  overflow: hidden;
  .star-status {
    color: #3d7fff;
    background: #cbdaf9;
    display: inline-block;
    position: absolute;
    left: -20px;
    top: 0px;
    padding: 6px 15px 6px 35px;
    font-size: 14px;
    transform: skew(-20deg);
    span {
      display: block;
      transform: skew(20deg);
    }
  }
  .star-top {
    padding-top: 44px;
  }
}
.star-top {
  padding: 10px;
  height: 136px;
  .cpu {
    display: inline-block;
    width: 120px;
  }
}
.star-bottom {
  padding: 6px 10px;
  height: 36px;
  span {
    font-size: 12px;
  }
  .updateProgress {
    display: inline-block;
    width: 100px;
    margin-left: 6px;
  }
  .icon-img-1 {
    display: block;
    width: 14px;
    margin-left: 6px;
    float: right;
    margin-top: 5px;
    cursor: pointer;
  }
  .icon-img-2 {
    display: block;
    width: 18px;
    margin-left: 6px;
    float: right;
    margin-top: 4px;
    cursor: pointer;
  }
}
.btn {
  margin-left: 10px;
}
.btn-line {
  margin-bottom: 16px;
}
</style>
